<script setup>
import { onMounted, ref } from "vue";
import { noticeFindAllService } from "@/api/notice.js";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from 'echarts';
import {  CoursefindAllCountServer } from "@/api/course.js";
import { questionAllCountServer } from "@/api/question.js";
import { purchaseCountAndTimeService, purchaseCountService } from "@/api/purchase.js";
import { useRouter } from 'vue-router'; // 引入 useRouter

const router = useRouter(); // 获取 router 实例

const navigateTo = (path) => {
  router.push(path);
};
const activeName = ref('1');

const noticeDataModel = ref();
const purchaseDataModel = ref();

const noticeFindAll = async () => {
  let result = await noticeFindAllService();
  noticeDataModel.value = result.data;
};

const purchaseCountAndTime = async () => {
  let result = await purchaseCountAndTimeService();
  purchaseDataModel.value = result.data;
  InitLine();


};


const InitLine = () => {
  if (!purchaseDataModel.value) {
    console.error("purchaseDataModel is not initialized");
    return;
  }

  let chartDom = document.getElementById('line');
  let myChart = echarts.init(chartDom);
  let option;

  // 将 purchaseDataModel 转换为 echarts 所需的数组格式
  const data = Object.entries(purchaseDataModel.value).map(([date, count]) => ({ date, count }));

  option = {
    title: {
      text: '近日订单统计(折线)',
      subtext: '统计维度：订单个数',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.date)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.map(item => item.count),
        type: 'line',
        smooth: true
      }
    ]
  };

  option && myChart.setOption(option);
};

const numberModel = ref({
  orderCount: 0,
  recommendCount: 0,
  courseCount: 0,
  questionCount: 0
});

const numberfind= async()  => {
  let result=await questionAllCountServer();
  numberModel.value.questionCount=result.data;
  let result2=await  CoursefindAllCountServer();
  numberModel.value.courseCount=result2.data;
  let result3=await purchaseCountService();
  numberModel.value.orderCount=result3.data;
  
}

onMounted(() => {
  noticeFindAll();
  purchaseCountAndTime();
  numberfind();
});

//<!--这里应该放四个数据 订单数量 推荐数量 课程数量  题目数量 -->


</script>


<template>
  <el-row :gutter="20" style="height: 400px;">
    <el-col :span="16" class="white-background">
     <h1>快捷入口</h1>
      <hr>
      <!--用户管理 个人设置 课程管理 题目管理 订单管理 小助手入口 奖励管理 -->
      <div class="centered-icons">
        <div class="icon-with-description" @click="navigateTo('/user/manage')">
          <div class="icon-container">
            <img src="https://img.icons8.com/?size=100&id=85392&format=png&color=000000" alt="用户管理" />
          </div>
          <p>用户管理</p>
        </div>
        <div class="icon-with-description" @click="navigateTo('/user/info')">
          <div class="icon-container">
            <img src='https://img.icons8.com/?size=100&id=50722&format=png&color=000000' alt="个人设置" />
          </div>
          <p>个人设置</p>
        </div>
        <div class="icon-with-description" @click="navigateTo('/courses/manage')">
          <div class="icon-container">
            <img src='https://img.icons8.com/?size=100&id=9437&format=png&color=000000' alt="课程管理" />
          </div>
          <p>课程管理</p>
        </div>
        <div class="icon-with-description" @click="navigateTo('/questions/manage')">
          <div class="icon-container">
            <img src='https://img.icons8.com/?size=100&id=46982&format=png&color=000000' alt="题目管理" />
          </div>
          <p>题目管理</p>
        </div>
        <div class="icon-with-description" @click="navigateTo('/purchase/manage')">
          <div class="icon-container">
            <img src='https://img.icons8.com/?size=100&id=xbOWBJeAsiRw&format=png&color=000000' alt="订单管理" />
          </div>
          <p>订单管理</p>
        </div>
        
        <div class="icon-with-description" @click="navigateTo('/purchase/manage')">
          <div class="icon-container">
            <img src='https://img.icons8.com/?size=100&id=42957&format=png&color=000000' alt="奖励管理" />
          </div>
          <p>奖励管理</p>
        </div>
      </div>
    </el-col>
    <el-col :span="7" class="white-background with-margin">
      <h1>数据统计</h1>
      <hr>
      <div class="data-grid">
        <div class="data-item">
          <h3>订单数量</h3>
          <p class="light-blue">{{ numberModel.orderCount }}</p>
        </div>
        <div class="data-item">
          <h3>推荐数量</h3>
          <p class="light-green">{{ numberModel.recommendCount }}</p>
        </div>
        <div class="data-item">
          <h3>课程数量</h3>
          <p class="orange">{{ numberModel.courseCount }}</p>
        </div>
        <div class="data-item">
          <h3>题目数量</h3>
          <p class="yellow">{{ numberModel.questionCount }}</p>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="16" class="white-background">
      <h1>系统公告</h1>
      <hr>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="item in noticeDataModel" :title="item.name" :name="item.id">
          <div>{{ item.content }}</div>
        </el-collapse-item>
      </el-collapse>
    </el-col>
    <el-col :span="7" class="white-background with-margin">
      <h1>订单统计</h1>
      <hr>
      <div id="line" style=" height: 600px;"></div>
    </el-col>
  </el-row>
</template>
<style>
/* 其他样式... */

body {
  background-image: url('@/assets/background.jpeg'); /* 设置背景图片 */
  background-size: cover; /* 使背景图片覆盖整个页面 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-attachment: fixed; /* 使背景图片固定，不随滚动条滚动 */
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.white-background {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  backdrop-filter: blur(0px); /* 模糊效果 */
  border-radius: 4px; /* 圆角 */
  padding: 20px; /* 内边距 */
}

.with-margin {
  margin-left: 20px; /* 根据需要调整间距 */
}
.centered-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 图标之间的间距 */
  margin-top: 50px; /* 添加顶部间距 */
}

.icon-with-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  text-align: center; /* 文本居中 */
}

.icon-container {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  margin-bottom: 5px; /* 图片和文本之间的间距 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
  backdrop-filter: blur(0px); /* 模糊效果 */
}

.icon-container:hover {
  transform: scale(1.1); /* 放大效果 */
}

.icon-with-description img {
  display: block; /* 确保图片居中 */
}

.icon-with-description p {
  margin: 0; /* 去掉默认的段落间距 */
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.data-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  background-color: transparent; /* 设置背景透明 */
}

.data-item p:first-child {
  margin-bottom: 5px;
}

.data-item p:last-child {
  font-size: 1.2em;
}

.light-blue {
  color: blue; /* 浅蓝色 */
}

.light-green {
  color: green; /* 浅绿色 */
}

.orange {
  color: #ffa500; /* 橙色 */
}

.yellow {
  color: #241392; /* 黄色 */
}

h1 {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 30px;
}

/* 修改 el-collapse-item 样式 */
.el-collapse-item__header {
  font-weight: bold; /* 加粗字体 */
  width: 100%; /* 设置宽度 */
  padding: 10px 20px; /* 增加内边距 */
  font-size: 20px; /* 增加字体大小 */
  height: 90px; /* 增加标题的高度 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
}

/* 修改 el-collapse-item 内容的样式 */
.el-collapse-item__wrap .el-collapse-item__content {
  font-size: 20px; /* 增加字体大小 */
  padding: 10px 20px; /* 增加内边距 */
}
</style>